import React, { useEffect } from 'react';
import { NavLink, Route, Switch, withRouter } from 'react-router-dom';
import '../sysStyle/home.css';
import Header from '../sysDemo/Header';
import { getApplist } from '../sysRedux/getAppList';
import { connect } from 'react-redux';
import { Menu } from 'antd';
import {
    AppstoreOutlined,
    ReadOutlined,
    LaptopOutlined,
    AppstoreAddOutlined,
    UserOutlined,
    HomeOutlined,
    FileTextOutlined,
    FileAddOutlined,
    TeamOutlined,
    UnorderedListOutlined,
    CheckCircleOutlined,
    CloseCircleOutlined,
    InfoCircleOutlined,
    IssuesCloseOutlined,
} from '@ant-design/icons';
import AppDetail from './AppDetail';

const { SubMenu } = Menu;

const Banner = (props) => {
    if (!localStorage.getItem('token')) {
        props.history.push('/');
    }
    //获取App列表
    useEffect(() => {
        props.dispatch(getApplist());
    }, []);
    const routes = props.applist.map((item) => {
        let obj = {
            path: props.match.path + '/appdetail/' + item.appname,
            component: AppDetail
        };
        return obj;
    });
    return (
        <div>
            <Header props={props} />
            <Switch>
                {
                    routes.map((item, idx) => (
                        <Route key={idx} path={item.path} component={item.component} />
                    ))
                }
            </Switch>
            <Menu
                // onClick={handleClick}
                style={{ width: '20%', height: '95%', position: 'fixed', top: '50px', left: 0, overflow: 'auto' }}
                defaultSelectedKeys={['0']}
                // defaultOpenKeys={['sub1']}
                mode="inline"
            >
                <Menu.Item key="0" icon={<HomeOutlined />}>
                    <NavLink to='/home/main'>主页</NavLink>
                </Menu.Item>

                <SubMenu key="sub1" icon={<ReadOutlined />} title="生活小贴士">
                    <Menu.Item key="1" icon={<FileTextOutlined />}>
                        <NavLink to='/home/article'>全部文章</NavLink>
                    </Menu.Item>
                    <Menu.Item key="2" icon={<FileAddOutlined />}>
                        <NavLink to='/home/addArticle'>新增文章</NavLink>
                    </Menu.Item>
                </SubMenu>

                <SubMenu key="sub2" title="乐易APP" icon={<LaptopOutlined />}>
                    <SubMenu key="5" title="全部APP" icon={<AppstoreOutlined />} >
                        {
                            props.applist.map((item, index) => (
                                <Menu.Item key={item.appname}>
                                    <NavLink to={{ pathname: routes[index].path, state: item }} >{item.cname}</NavLink>
                                </Menu.Item>
                            ))
                        }
                    </SubMenu>
                    <Menu.Item key="6" icon={<AppstoreAddOutlined />}>
                        <NavLink to='/home/addapp' >新增APP</NavLink>
                    </Menu.Item>

                </SubMenu>

                <SubMenu key="sub4" icon={<UserOutlined />} title="用户信息">
                    <Menu.Item key="9" icon={<TeamOutlined />}>
                        <NavLink to='/home/userinfo' >全部用户</NavLink>
                    </Menu.Item>
                </SubMenu>
                <SubMenu key="sub5" icon={<UnorderedListOutlined />} title="功能审核">
                    <Menu.Item key="10" icon={<InfoCircleOutlined />}>
                        <NavLink to='/home/examine' >待审核</NavLink>
                    </Menu.Item>
                    <SubMenu key="sub6" icon={<IssuesCloseOutlined />} title="已审核">
                        <Menu.Item key="11" icon={<CheckCircleOutlined />}>
                            <NavLink to='/home/adopt' >已通过</NavLink>
                        </Menu.Item>
                        <Menu.Item key="12" icon={<CloseCircleOutlined />}>
                            <NavLink to='/home/failed' >已驳回</NavLink>
                        </Menu.Item>
                    </SubMenu>

                </SubMenu>
            </Menu>
        </div>
    )
}

const mapStateToProps = (state) => ({
    applist: state.applist.data,
})

export default withRouter(connect(mapStateToProps)(Banner));

